<template>
  <div 
    :ref="drag" 
    :style="{ opacity: isDragging ? 0.5 : 1 }" 
    class="draggable-item"
    draggable="true" 
    @dragstart="handleDragStart"
  >
    <!-- Render the content passed via slot -->
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { useDrag } from 'vue3-dnd'
import { computed } from 'vue'
import type { FilesystemItemMeta } from '@/utils/indexedDBService'
import { ItemTypes } from './constants.ts' // Explicitly add .ts extension

const props = defineProps<{
  item: FilesystemItemMeta
}>()

// --- Native DragStart Handler ---
const handleDragStart = (event: DragEvent) => {
  if (event.dataTransfer) {
    const dragData = JSON.stringify({
      uuid: props.item.uuid,
      type: props.item.type,
      // Optionally add name if needed by breadcrumb hover feedback
      name: props.item.name 
    });
    // Use a custom MIME type or standard text/plain
    event.dataTransfer.setData('application/json', dragData);
    // Set fallback for browsers that only read text/plain
    event.dataTransfer.setData('text/plain', dragData); 
    // Set allowed effect
    event.dataTransfer.effectAllowed = 'move'; // Or 'copyMove' if copying is possible
    console.log(`[DraggableItem] dragstart: Set dataTransfer for ${props.item.uuid}`);
  }
}
// -----------------------------

const [collect, drag] = useDrag(() => ({
  type: ItemTypes.FILESYSTEM_ITEM, // Define this type
  item: {
      // Data to be transferred during drag
      uuid: props.item.uuid,
      type: props.item.type,
      parentId: props.item.parentId,
      name: props.item.name // Include name for potential display
  },
  collect: (monitor) => ({
    isDragging: monitor.isDragging(),
  }),
  // Optional: canDrag, end hooks if needed
}))

const isDragging = computed(() => collect.value.isDragging)

</script>

<style scoped>
.draggable-item {
  cursor: move;
  transition: opacity 0.2s ease-in-out;
  /* Add other base styles if needed */
}
</style> 